<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天命图</title>
  <link rel="stylesheet" href="css/elementui.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/vue.js"></script>
  <script src="js/elementui.js"></script>
</head>

<body>
  <div id="app" v-cloak>
    <el-container style="height:100%">
      <el-header height="50px" style="background: #3bba7d; -webkit-app-region: drag;">
        <img src="img/logo-white.png" class="logo">
        <span class="appName">天命图</span>
        <img src="img/skin.png" class="skin">
        <div class="operate">
          <div name="userInfo">
            <img :src="user.headImage || 'img/avatar.png'">
            <span style="max-width: 40px;" @click="logout" title="点击退出登录">{{ user.nickname || "未登录" }}</span>
          </div>
          <div name="minimize">
            <img src="img/minimize.svg" @click="minimize">
          </div>
          <div name="unmaximize" v-if="isMaximize">
            <img src="img/unmaximize.svg" @click="unmaximize">
          </div>
          <div name="maximize" v-else>
            <img src="img/maximize.svg" @click="maximize">
          </div>
          <div name="close" @click="close">
            <img src="img/close.svg">
          </div>
        </div>
      </el-header>
      <el-container style="height: calc(100% - 50px);">
        <el-aside width="25%">
          <el-menu default-active="file" style="height:100%" active-text-color="#3bba7d" @select="select">
            <el-menu-item index="file" :style="{ background: selectMenu === 'file' ? '#ecf5ff' : '' }">
              <i class="el-icon-menu"></i>
              <span slot="title">文件列表</span>
            </el-menu-item>
            <el-menu-item index="recycle" :style="{ background: selectMenu === 'recycle' ? '#ecf5ff' : '' }">
              <i class="el-icon-delete-solid"></i>
              <span slot="title">回收站</span>
            </el-menu-item>
            <el-menu-item index="setting" :style="{ background: selectMenu === 'setting' ? '#ecf5ff' : '' }">
              <i class="el-icon-s-tools"></i>
              <span slot="title">设置</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="padding: 0;">
          <div v-if="selectMenu === 'file'">
            <el-table
              :data="fileList.filter((item) => { return searchFile === '' ? true : item.name.includes(searchFile) })"
              highlight-current-row="true"
              height="550"
              style="font-size: 13px;"
              @row-dblclick="toEdit"
              title="双击打开"
            >
              <el-table-column prop="name" label="文件名" sortable width="150"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" sortable width="180"></el-table-column>
              <el-table-column prop="updateTime" label="修改时间" sortable width="160"></el-table-column>
              <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                  <el-input size="mini" v-model="searchFile" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    style="color: #3bba7d"
                    class="text-button"
                    @click="renameFile(scope.$index)"
                  >重命名</el-button>
                  <el-button
                    type="text"
                    size="small"
                    style="color: #f56c6c"
                    class="text-button"
                    @click="moveToRecycle(fileList[scope.$index]._id)"
                  >移至回收站</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="create" title="创建新文件" @click="createFile">+</div>
          </div>
          <div v-if="selectMenu === 'recycle'">
            <el-table
              :data="recycleList.filter((item) => { return searchRecyc === '' ? true : item.name.includes(searchRecyc) })"
              highlight-current-row="true"
              height="550"
              style="font-size: 13px;"
            >
              <el-table-column prop="name" label="文件名" sortable width="150"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" sortable width="180"></el-table-column>
              <el-table-column prop="updateTime" label="修改时间" sortable width="160"></el-table-column>
              <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                  <el-input v-model="searchRecyc" size="mini" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    style="color: #3bba7d"
                    class="text-button"
                    @click="revertFile(recycleList[scope.$index]._id)"
                  >还原</el-button>
                  <el-button
                    type="text"
                    size="small"
                    style="color: #f56c6c"
                    class="text-button"
                    @click="deleteFile(recycleList[scope.$index]._id)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="clear" v-show="recycleList.length > 0" title="清空回收站" @click="clearRecycle">x</div>
          </div>
          <div v-if="selectMenu === 'setting'">setting</div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <script src="js/index.js"></script>
</body>

</html>